<!-- 主题设置模板 -->

<script type="text/html" template lay-done="layui.data.theme();">
    {{#
    var local = layui.data(layui.conf.tableName)
    ,theme = local.theme || {}
    ,themeColorIndex =  parseInt((theme && theme.color) ? theme.color.index : 0) || 0;
    }}

    <div class="layui-card-header">
        配色方案
    </div>
    <div class="layui-card-body layadmin-setTheme">
        <ul class="layadmin-setTheme-color">
            {{# layui.each(layui.conf.theme.color, function(index, item){ }}
            <li nepadmin-event="setTheme" data-index="{{ index }}" data-alias="{{ item.alias }}"
                {{ index=== themeColorIndex ?
            'class="layui-this"' : '' }} title="{{ item.alias }}">
            <div class="layadmin-setTheme-header" style="background-color: {{ item.header }};"></div>
            <div class="layadmin-setTheme-side" style="background-color: {{ item.main }};">
                <div class="layadmin-setTheme-logo" style="background-color: {{ item.logo }};"></div>
            </div>
            </li>
            {{# }); }}
        </ul>
    </div>
</script>

<script>
    layui.data.theme = function () {
        layui.use('form', function () {
            var form = layui.form
                , admin = layui.admin;


        });
    };
</script>
<style>
    
    .layadmin-setTheme {
        padding: 15px;
        overflow-x: hidden;
    }

    .layadmin-setTheme-color li {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 44%;
        height: 80px;
        margin: 0 15px 3% 0;
        background-color: #f2f2f2;
        cursor: pointer;
        font-size: 12px;
        color: #666;
    }

    .layadmin-setTheme-header {
        position: relative;
        z-index: 10;
        height: 10px;
        border-top: 1px solid #f2f2f2;
        border-right: 1px solid #f2f2f2;
        background-color: #fff;
    }

    .layadmin-setTheme-side {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 100%;
        z-index: 11;
        box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);
        background-color: #20222A;
        color: #fff;
    }

    .layadmin-setTheme-logo {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 10px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    }

    .layadmin-setTheme-color li:after {
        content: '';
        position: absolute;
        z-index: 20;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 0;
        border: 1px solid #f2f2f2;
        transition: all .3s;
        -webkit-transition: all .3s;
        opacity: 0
    }

    .layadmin-setTheme-color li.layui-this:after, .layadmin-setTheme-color li:hover:after {
        width: 100%;
        height: 100%;
        padding: 4px;
        top: -5px;
        left: -5px;
        border-color: #5FB878;
        opacity: 1;
    }

</style>